require('./PageLsgdgdDetail.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Map,Marker } from 'react-amap';

import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem} from  'react-weui/build/packages'
import {Control} from 'react-keeper';
import ReactEcharts from 'echarts-for-react';

class LsgdgdDetail extends React.Component {

  constructor(props) {
    super(props);
    this.amapEvents = {
      created: (mapInstance) => {
        Actions.setMapInstance(mapInstance);
      }
    };
  }

  render() {
    return (
      <Page className="page" infiniteLoader={false} ptr={false}>
        <div style={{height:'240px',zIndex:'1',position:'flex'}}>
          <Map amapkey={'5bb1467495c46464737e970b64ea5d68'} dragEnable={false} zoomEnable={true}
               showBuildingBlock={true} zoom={16} zooms={[11,20]} center={this.state.lsgdgdDetail.position}
               doubleClickZoom={false} events={this.amapEvents}>
            <Marker position={this.state.lsgdgdDetail.position}>
              <div className="markerA"></div>
            </Marker>
          </Map>
        </div>
        <Panel>
          <PanelHeader>
            <div className="title-bg"/>
            实时数据
          </PanelHeader>
          <PanelBody>
            <div className="pmGrid">
              <div style={{paddingLeft:'15px'}}>
                <Flex>
                  <FlexItem>
                    <div className="placeholder">pm2.5</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.pmTwo}</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placeholder">风速</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.windSpeed}</div>
                  </FlexItem>
                </Flex>

                <Flex>
                  <FlexItem>
                    <div className="placeholder">pm10</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.pmTen}</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placeholder">风向</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.windDeriction}</div>
                  </FlexItem>
                </Flex>

                <Flex>
                  <FlexItem>
                    <div className="placeholder">pm100</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.pmHundred}</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placeholder">温度</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.temperature}</div>
                  </FlexItem>
                </Flex>

                <Flex>
                  <FlexItem>
                    <div className="placeholder">噪音</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.tsp}</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placeholder">湿度</div>
                  </FlexItem>
                  <FlexItem>
                    <div className="placedata">{this.state.lsgdgdDetail.listData.humidity}</div>
                  </FlexItem>
                </Flex>
              </div>
            </div>

          </PanelBody>
          <PanelFooter href="javascript:void(0);">
            <Cell>
              <CellBody/>
              <CellFooter>
                <div style={{fontSize:'12px',color:'blue'}}>数据最后更新时间:{this.state.lsgdgdDetail.listData.saveTime}</div>
              </CellFooter>
            </Cell>


          </PanelFooter>
        </Panel>

        <Panel>
          <PanelHeader>
            <div className="title-bg"/>
            趋势图
          </PanelHeader>
          <PanelBody>
            <ReactEcharts
              option={this.state.lsgdgdDetail.qxoption}
            />
          </PanelBody>
        </Panel>
        <Toast icon="loading" show={this.state.lsgdgdDetail.showLoading}>Loading...</Toast>
      </Page>
    );
  }

  componentWillMount() {

  }

  componentDidMount() {
    Actions.loadingControl(true);
    Actions.loadData(this.props.params.pcode);
  }


  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.lsgdgdDetail || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      console.log(Object.keys(thisState).length, Object.keys(nextState).length);
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        console.log(thisState[key], nextState[key]);
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(LsgdgdDetail, Reflux.connect(Store, 'lsgdgdDetail'));


export default LsgdgdDetail ;
